home *** CD-ROM | disk | FTP | other *** search
/ PC Pro 2005 October / DPPCPRO1005.ISO / Download / Web Developer / webdeveloper.xpi / chrome / webdeveloper.jar / content / webdeveloper / sidebar / edit_css.js next >
Encoding:
Text File  |  2005-03-21  |  21.9 KB  |  607 lines
  1. var webdeveloper_editCSSSelectedTab = -1;
  2. var webdeveloper_intervalID         = null;
  3. var webdeveloper_updateFrequency    = 500;
  4.  
  5. // Applies the CSS
  6. function webdeveloper_applyCSS()
  7. {
  8.     const content         = window.top.getBrowser();
  9.     const mainTabBox      = content.mTabBox;
  10.     const contentDocument = content.browsers[mainTabBox.selectedIndex].contentDocument;
  11.     const styleElement    = contentDocument.getElementById("webdeveloper-edit-css-style");
  12.     const textBoxes       = document.getElementById("webdeveloper-edit-css-tab-panels").getElementsByTagName("textbox");
  13.  
  14.     var styleText = "";
  15.  
  16.     // Loop through the text boxes
  17.     for(var i = 0; i < textBoxes.length; i++)
  18.     {
  19.         styleText += textBoxes[i].value;
  20.     }
  21.  
  22.     // If the style element exists and the style text is not the same
  23.     if(styleElement && styleText != styleElement.innerHTML)
  24.     {
  25.         webdeveloper_removeAllChildNodes(styleElement);
  26.         styleElement.appendChild(contentDocument.createTextNode(styleText));
  27.     }
  28. }
  29.  
  30. // Clear the CSS
  31. function webdeveloper_clearCSS()
  32. {
  33.     webdeveloper_getSelectedPanel().firstChild.value = "";
  34. }
  35.  
  36. // Reinitializes the sidebar when the page changes
  37. function webdeveloper_contentPageLoad(event)
  38. {
  39.     const eventTarget        = event.target;
  40.     const originalTarget     = event.originalTarget;
  41.     const preferencesService = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService).getBranch("");
  42.  
  43.     // If the page is the target and the URI matches
  44.     if(originalTarget && eventTarget && eventTarget.contentDocument && eventTarget.hasAttribute && eventTarget.hasAttribute("id") && eventTarget.getAttribute("id").toLowerCase() == "content" && originalTarget.documentURI == eventTarget.contentDocument.documentURI)
  45.     {
  46.         // If the CSS stick preference is set to true
  47.         if(preferencesService.prefHasUserValue("webdeveloper.edit.css.stick") && preferencesService.getBoolPref("webdeveloper.edit.css.stick"))
  48.         {
  49.             webdeveloper_initializeEditCSS(false);
  50.         }
  51.         else
  52.         {
  53.             webdeveloper_resetCSS();
  54.         }
  55.     }
  56. }
  57.  
  58. // Handles a browser tab being selected
  59. function webdeveloper_editCSSMainTabSelect(event)
  60. {
  61.     const selectedTab = window.top.getBrowser().mTabBox.selectedIndex;
  62.  
  63.     // If the selected tab is different
  64.     if(selectedTab != webdeveloper_editCSSSelectedTab)
  65.     {
  66.         const preferencesService = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService).getBranch("");
  67.  
  68.         webdeveloper_editCSSSelectedTab = selectedTab;
  69.  
  70.         // If the CSS stick preference is set to true
  71.         if(preferencesService.prefHasUserValue("webdeveloper.edit.css.stick") && preferencesService.getBoolPref("webdeveloper.edit.css.stick"))
  72.         {
  73.             webdeveloper_initializeEditCSS(false);
  74.         }
  75.         else
  76.         {
  77.             webdeveloper_resetCSS();
  78.         }
  79.     }
  80. }
  81.  
  82. // Handles a tab being selected
  83. function webdeveloper_editCSSTabSelect(event)
  84. {
  85.     const selectedTab = document.getElementById("webdeveloper-edit-css-tab-box").selectedTab;
  86.     const nextTab     = selectedTab.nextSibling;
  87.     const previousTab = selectedTab.previousSibling;
  88.  
  89.     // If there is a previous tab
  90.     if(previousTab)
  91.     {
  92.         // Remove the after selected attribute
  93.         if(previousTab.hasAttribute("afterselected"))
  94.         {
  95.             previousTab.removeAttribute("afterselected");
  96.         }
  97.  
  98.         // Remove the before selected attribute
  99.         if(previousTab.hasAttribute("beforeselected"))
  100.         {
  101.             previousTab.removeAttribute("beforeselected");
  102.         }
  103.     }
  104.  
  105.     // If there is a next tab
  106.     if(nextTab)
  107.     {
  108.         // Remove the after selected attribute
  109.         if(nextTab.hasAttribute("afterselected"))
  110.         {
  111.             nextTab.removeAttribute("afterselected");
  112.         }
  113.  
  114.         // Remove the before selected attribute
  115.         if(nextTab.hasAttribute("beforeselected"))
  116.         {
  117.             nextTab.removeAttribute("beforeselected");
  118.         }
  119.     }
  120. }
  121.  
  122. // Unloads edit CSS
  123. function webdeveloper_editCSSUnload()
  124. {
  125.     const content         = window.top.getBrowser();
  126.     const mainTabBox      = content.mTabBox;
  127.     const currentDocument = content.browsers[mainTabBox.selectedIndex].contentDocument;
  128.     const styleElement    = currentDocument.getElementById("webdeveloper-edit-css-style");
  129.     const styleSheetList  = currentDocument.styleSheets;
  130.     const tabBox          = document.getElementById("webdeveloper-edit-css-tab-box");
  131.  
  132.     var styleSheet = null;
  133.  
  134.     window.clearInterval(webdeveloper_intervalID);
  135.  
  136.     mainTabBox.removeEventListener("select", webdeveloper_editCSSMainTabSelect, true);
  137.     tabBox.removeEventListener("select", webdeveloper_editCSSTabSelect, true);
  138.     window.top.removeEventListener("load", webdeveloper_contentPageLoad, true);
  139.  
  140.     // If the style element exists
  141.     if(styleElement)
  142.     {
  143.         styleElement.parentNode.removeChild(styleElement);
  144.     }
  145.  
  146.     // Loop through the style sheets
  147.     for(var i = 0; i < styleSheetList.length; i++)
  148.     {
  149.         styleSheet = styleSheetList[i];
  150.  
  151.         webdeveloper_enableStyleSheet(styleSheet);
  152.     }
  153. }
  154.  
  155. // Enables a style sheet
  156. function webdeveloper_enableStyleSheet(styleSheet)
  157. {
  158.     const ownerNode = styleSheet.ownerNode;
  159.  
  160.     var cssRule = null;
  161.  
  162.     // Loop through the the style sheet rules
  163.     for(var i = 0; i < styleSheet.cssRules.length; i++)
  164.     {
  165.         cssRule = styleSheet.cssRules[i];
  166.  
  167.         // If this is an import rule
  168.         if(cssRule.type == 3)
  169.         {
  170.             webdeveloper_enableStyleSheet(cssRule.styleSheet);
  171.         }
  172.     }
  173.  
  174.     // If the style sheet does not have an owner node or is not an alternate style sheet
  175.     if(!ownerNode || ownerNode.nodeType == 7 || !ownerNode.hasAttribute("rel") || ownerNode.getAttribute("rel").toLowerCase() != "alternate stylesheet")
  176.     {
  177.         styleSheet.disabled = false;
  178.     }
  179. }
  180.  
  181. // Returns the selected panel
  182. function webdeveloper_getSelectedPanel()
  183. {
  184.     var selectedPanel = document.getElementById("webdeveloper-edit-css-tab-panels").selectedPanel;
  185.  
  186.     // If the selected panel is not set
  187.     if(!selectedPanel)
  188.     {
  189.         selectedPanel = document.getElementById("webdeveloper-edit-css-tab-panels").firstChild;
  190.     }
  191.  
  192.     return selectedPanel;
  193. }
  194.  
  195. // Initializes the edit CSS sidebar
  196. function webdeveloper_initializeEditCSS(reset)
  197. {
  198.     const content            = window.top.getBrowser();
  199.     const mainTabBox         = content.mTabBox;
  200.     const currentDocument    = content.browsers[mainTabBox.selectedIndex].contentDocument;
  201.     const headElementList    = currentDocument.getElementsByTagName("head");
  202.     const preferencesService = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService).getBranch("");
  203.     const tabBox             = document.getElementById("webdeveloper-edit-css-tab-box");
  204.     const textBoxes          = document.getElementById("webdeveloper-edit-css-tab-panels").getElementsByTagName("textbox");
  205.  
  206.     var styleElement = currentDocument.getElementById("webdeveloper-edit-css-style");
  207.     var styleText    = "";
  208.  
  209.     // Try to remove the main tab box select event listener
  210.     try
  211.     {
  212.         mainTabBox.removeEventListener("select", webdeveloper_editCSSMainTabSelect, true);
  213.     }
  214.     catch(exception)
  215.     {
  216.         // Do nothing
  217.     }
  218.  
  219.     // Try to remove the tab box event select listener
  220.     try
  221.     {
  222.         tabBox.removeEventListener("select", webdeveloper_editCSSTabSelect, true);
  223.     }
  224.     catch(exception)
  225.     {
  226.         // Do nothing
  227.     }
  228.  
  229.     // Try to remove the load event listener
  230.     try
  231.     {
  232.         window.top.removeEventListener("load", webdeveloper_contentPageLoad, true);
  233.     }
  234.     catch(exception)
  235.     {
  236.         // Do nothing
  237.     }
  238.  
  239.     mainTabBox.addEventListener("select", webdeveloper_editCSSMainTabSelect, true);
  240.     tabBox.addEventListener("select", webdeveloper_editCSSTabSelect, true);
  241.     window.top.addEventListener("load", webdeveloper_contentPageLoad, true);
  242.  
  243.     // If resetting
  244.     if(reset)
  245.     {
  246.         webdeveloper_updateStickCSS();
  247.         webdeveloper_retrieveCSS();
  248.     }
  249.  
  250.     // If the style element does not exist
  251.     if(!styleElement)
  252.     {
  253.         styleElement = currentDocument.createElement("style");
  254.  
  255.         styleElement.setAttribute("id", "webdeveloper-edit-css-style");
  256.         styleElement.setAttribute("type", "text/css");
  257.  
  258.         // If there is a head element
  259.         if(headElementList.length > 0)
  260.         {
  261.             headElementList[0].appendChild(styleElement);
  262.         }
  263.         else
  264.         {
  265.             currentDocument.documentElement.appendChild(styleElement);
  266.         }
  267.     }
  268.  
  269.     // If the edit CSS update frequency preference is set
  270.     if(preferencesService.prefHasUserValue("webdeveloper.edit.css.update.frequency"))
  271.     {
  272.         webdeveloper_updateFrequency = preferencesService.getIntPref("webdeveloper.edit.css.update.frequency");
  273.     }
  274.  
  275.     webdeveloper_applyCSS();
  276.  
  277.     webdeveloper_intervalID = window.setInterval(webdeveloper_applyCSS, webdeveloper_updateFrequency);
  278. }
  279.  
  280. // Loads new CSS
  281. function webdeveloper_loadCSS()
  282. {
  283.     const filePicker   = Components.classes["@mozilla.org/filepicker;1"].createInstance(Components.interfaces.nsIFilePicker);
  284.     const stringBundle = document.getElementById("webdeveloper-string-bundle");
  285.  
  286.     filePicker.appendFilter(stringBundle.getString("webdeveloper_styleSheetDescription"), "*.css");
  287.     filePicker.init(window, stringBundle.getString("webdeveloper_editCSSLoadStyleSheetTitle"), filePicker.modeOpen);
  288.  
  289.     // If the user selected a style sheet
  290.     if(filePicker.show() == filePicker.returnOK)
  291.     {
  292.         const inputStream      = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance(Components.interfaces.nsIFileInputStream);
  293.         const scriptableStream = Components.classes["@mozilla.org/scriptableinputstream;1"].createInstance(Components.interfaces.nsIScriptableInputStream);
  294.  
  295.         inputStream.init(filePicker.file, 0x01, 0444, null);
  296.         scriptableStream.init(inputStream);
  297.  
  298.         webdeveloper_getSelectedPanel().firstChild.value = scriptableStream.read(scriptableStream.available());
  299.  
  300.         scriptableStream.close();
  301.         inputStream.close();
  302.     }
  303. }
  304.  
  305. // Resets the edited CSS
  306. function webdeveloper_resetCSS()
  307. {
  308.     const content      = window.top.getBrowser();
  309.     const mainTabBox   = content.mTabBox;
  310.     const styleElement = content.browsers[mainTabBox.selectedIndex].contentDocument.getElementById("webdeveloper-edit-css-style");
  311.     const tabPanels    = document.getElementById("webdeveloper-edit-css-tab-panels");
  312.     const tabs         = document.getElementById("webdeveloper-edit-css-tabs");
  313.  
  314.     // If the style element exists
  315.     if(styleElement)
  316.     {
  317.         styleElement.parentNode.removeChild(styleElement);
  318.     }
  319.  
  320.     webdeveloper_removeAllChildNodes(tabPanels);
  321.     webdeveloper_removeAllChildNodes(tabs);
  322.  
  323.     webdeveloper_initializeEditCSS(true);
  324. }
  325.  
  326. // Retrieves the CSS from the current page
  327. function webdeveloper_retrieveCSS()
  328. {
  329.     const content            = window.top.getBrowser();
  330.     const mainTabBox         = content.mTabBox;
  331.     const currentDocument    = content.browsers[mainTabBox.selectedIndex].contentDocument;
  332.     const preferencesService = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService).getBranch("");
  333.     const stringBundle       = document.getElementById("webdeveloper-string-bundle");
  334.     const tabs               = document.getElementById("webdeveloper-edit-css-tabs");
  335.     const tabPanels          = document.getElementById("webdeveloper-edit-css-tab-panels");
  336.  
  337.     var cssRule          = null;
  338.     var inlineStylesText = "";
  339.     var mediaList        = null;
  340.     var ownerNode        = null;
  341.     var result           = null;
  342.     var results          = new Array();
  343.     var styleSheet       = null;
  344.     var styleSheetHref   = null;
  345.     var styleSheetList   = currentDocument.styleSheets;
  346.     var tab              = null;
  347.     var tabPanel         = null;
  348.     var textBox          = null;
  349.     var textBoxStyle     = "";
  350.  
  351.     // If the edit CSS background color preference is set
  352.     if(preferencesService.prefHasUserValue("webdeveloper.edit.css.color.background"))
  353.     {
  354.         textBoxStyle += "background-color: " + preferencesService.getComplexValue("webdeveloper.edit.css.color.background", Components.interfaces.nsISupportsString).data.trim() + " !important;";
  355.     }
  356.  
  357.     // If the edit CSS text color preference is set
  358.     if(preferencesService.prefHasUserValue("webdeveloper.edit.css.color.text"))
  359.     {
  360.         textBoxStyle += "color: " + preferencesService.getComplexValue("webdeveloper.edit.css.color.text", Components.interfaces.nsISupportsString).data.trim() + " !important;";
  361.     }
  362.  
  363.     // If the edit CSS font preference is set
  364.     if(preferencesService.prefHasUserValue("webdeveloper.edit.css.font"))
  365.     {
  366.         textBoxStyle += "font-size: " + preferencesService.getIntPref("webdeveloper.edit.css.font") + "px !important;";
  367.     }
  368.  
  369.     // Loop through the style sheets
  370.     for(i = 0; i < styleSheetList.length; i++)
  371.     {
  372.         styleSheet     = styleSheetList[i];
  373.         mediaList      = styleSheet.media.mediaText;
  374.         ownerNode      = styleSheet.ownerNode;
  375.         styleSheetHref = styleSheet.href;
  376.  
  377.         // If this is an inline style sheet
  378.         if(styleSheetHref == currentDocument.documentURI)
  379.         {
  380.             // Loop through the the style sheet rules
  381.             for(var j = 0; j < styleSheet.cssRules.length; j++)
  382.             {
  383.                 cssRule = styleSheet.cssRules[j];
  384.  
  385.                 // If this is an import rule
  386.                 if(cssRule.type == 3)
  387.                 {
  388.                     results = webdeveloper_retrieveStyleSheetDetails(cssRule.styleSheet, textBoxStyle, results);
  389.                 }
  390.             }
  391.         }
  392.         else if(styleSheetHref && styleSheetHref.indexOf("resource://") != 0 && styleSheetHref.indexOf("about:PreferenceStyleSheet") != 0 && styleSheetHref.indexOf("jar:file://") != 0 && styleSheetHref.indexOf("chrome://") != 0 && (!mediaList || mediaList.indexOf("screen") != -1 || mediaList.indexOf("all") != -1) && (!ownerNode || ownerNode.nodeType == 7 || !ownerNode.hasAttribute("rel") || ownerNode.getAttribute("rel").toLowerCase() != "alternate stylesheet"))
  393.         {
  394.             results = webdeveloper_retrieveStyleSheetDetails(styleSheet, textBoxStyle, results);
  395.         }
  396.     }
  397.  
  398.     styleSheetList = currentDocument.getElementsByTagName("style");
  399.  
  400.     // Loop through the inline style sheets
  401.     for(var i = 0; i < styleSheetList.length; i++)
  402.     {
  403.         styleSheet = styleSheetList[i];
  404.  
  405.         inlineStylesText += styleSheet.innerHTML.trim() + "\n\n";
  406.  
  407.         styleSheet.disabled = true;
  408.     }
  409.  
  410.     // If there are inline styles
  411.     if(inlineStylesText != "")
  412.     {
  413.         tab      = document.createElement("tab");
  414.         tabPanel = document.createElement("tabpanel");
  415.         textBox  = document.createElement("textbox");
  416.  
  417.         tab.setAttribute("label", stringBundle.getString("webdeveloper_editCSSInlineStyles"));
  418.         textBox.setAttribute("flex", "1");
  419.         textBox.setAttribute("multiline", "true");
  420.         textBox.setAttribute("style", textBoxStyle);
  421.         textBox.setAttribute("value", inlineStylesText);
  422.  
  423.         // If the edit CSS wrap preference is not set to true
  424.         if(!preferencesService.prefHasUserValue("webdeveloper.edit.css.wrap") || !preferencesService.getBoolPref("webdeveloper.edit.css.wrap"))
  425.         {
  426.             textBox.setAttribute("wrap", "off");
  427.         }
  428.  
  429.         tabPanel.appendChild(textBox);
  430.  
  431.         results.push(new Array(tab, tabPanel));
  432.     }
  433.  
  434.     // Loop through the results
  435.     for(i = 0; i < results.length; i++)
  436.     {
  437.         result = results[i];
  438.  
  439.         tabPanels.appendChild(result[1]);
  440.         tabs.appendChild(result[0]);
  441.     }
  442.  
  443.     // If there are no tabs
  444.     if(tabs.childNodes.length == 0)
  445.     {
  446.         tab      = document.createElement("tab");
  447.         tabPanel = document.createElement("tabpanel");
  448.         textBox  = document.createElement("textbox");
  449.  
  450.         tab.setAttribute("label", stringBundle.getString("webdeveloper_editCSS"));
  451.         textBox.setAttribute("flex", "1");
  452.         textBox.setAttribute("multiline", "true");
  453.         textBox.setAttribute("style", textBoxStyle);
  454.  
  455.         // If the edit CSS wrap preference is not set to true
  456.         if(!preferencesService.prefHasUserValue("webdeveloper.edit.css.wrap") || !preferencesService.getBoolPref("webdeveloper.edit.css.wrap"))
  457.         {
  458.             textBox.setAttribute("wrap", "off");
  459.         }
  460.  
  461.         tabPanel.appendChild(textBox);
  462.         tabPanels.appendChild(tabPanel);
  463.         tabs.appendChild(tab);
  464.     }
  465.  
  466.     tabs.selectedIndex = 0;
  467. }
  468.  
  469. // Retrieves the style sheet details
  470. function webdeveloper_retrieveStyleSheetDetails(styleSheet, textBoxStyle, results)
  471. {
  472.     const preferencesService = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService).getBranch("");
  473.     const request            = new XMLHttpRequest();
  474.     const styleSheetHref     = styleSheet.href;
  475.     const position           = styleSheetHref.lastIndexOf("/");
  476.     const url                = Components.classes["@mozilla.org/network/standard-url;1"].createInstance(Components.interfaces.nsIURL);
  477.  
  478.     var cssRule    = null;
  479.     var stylesText = "";
  480.     var tab        = document.createElement("tab");
  481.     var tabPanel   = document.createElement("tabpanel");
  482.     var textBox    = document.createElement("textbox");
  483.  
  484.     // Loop through the the style sheet rules
  485.     for(var i = 0; i < styleSheet.cssRules.length; i++)
  486.     {
  487.         cssRule = styleSheet.cssRules[i];
  488.  
  489.         // If this is an import rule
  490.         if(cssRule.type == 3)
  491.         {
  492.             results = webdeveloper_retrieveStyleSheetDetails(cssRule.styleSheet, textBoxStyle, results);
  493.         }
  494.     }
  495.  
  496.     request.open("get", styleSheetHref, false);
  497.     request.send("");
  498.  
  499.     stylesText = request.responseText;
  500.     url.spec   = styleSheetHref;
  501.  
  502.     tab.setAttribute("label", url.fileName);
  503.     textBox.setAttribute("flex", "1");
  504.     textBox.setAttribute("multiline", "true");
  505.     textBox.setAttribute("style", textBoxStyle);
  506.     textBox.setAttribute("value", stylesText);
  507.  
  508.     // If the edit CSS wrap preference is not set to true
  509.     if(!preferencesService.prefHasUserValue("webdeveloper.edit.css.wrap") || !preferencesService.getBoolPref("webdeveloper.edit.css.wrap"))
  510.     {
  511.         textBox.setAttribute("wrap", "off");
  512.     }
  513.  
  514.     tabPanel.appendChild(textBox);
  515.  
  516.     results.push(new Array(tab, tabPanel));
  517.  
  518.     styleSheet.disabled = true;
  519.  
  520.     return results;
  521. }
  522.  
  523. // Saves the CSS
  524. function webdeveloper_saveCSS()
  525. {
  526.     const filePicker   = Components.classes["@mozilla.org/filepicker;1"].createInstance(Components.interfaces.nsIFilePicker);
  527.     const stringBundle = document.getElementById("webdeveloper-string-bundle");
  528.     const styleText    = webdeveloper_getSelectedPanel().firstChild.value;
  529.  
  530.     var result = null;
  531.  
  532.     filePicker.appendFilter(stringBundle.getString("webdeveloper_styleSheetDescription"), "*.css");
  533.     filePicker.init(window, stringBundle.getString("webdeveloper_editCSSSaveStyleSheetTitle"), filePicker.modeSave);
  534.     result = filePicker.show();
  535.  
  536.     // If the user selected a style sheet
  537.     if(result == filePicker.returnOK || result == filePicker.returnReplace)
  538.     {
  539.         const outputStream = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream);
  540.  
  541.         // If the file does not exist
  542.         if(!filePicker.file.exists())
  543.         {
  544.             filePicker.file.create(Components.interfaces.nsIFile.NORMAL_FILE_TYPE, 444);
  545.         }
  546.  
  547.         outputStream.init(filePicker.file, 0x04 | 0x08 | 0x20, 0444, null);
  548.  
  549.         outputStream.write(styleText, styleText.length);
  550.         outputStream.close();
  551.     }
  552. }
  553.  
  554. // Toggles sticking the CSS
  555. function webdeveloper_toggleStickCSS()
  556. {
  557.     const preferencesService = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService).getBranch("");
  558.  
  559.     var stick = true;
  560.  
  561.     // If the edit CSS stick preference is set
  562.     if(preferencesService.prefHasUserValue("webdeveloper.edit.css.stick"))
  563.     {
  564.         stick = !preferencesService.getBoolPref("webdeveloper.edit.css.stick");
  565.     }
  566.  
  567.     preferencesService.setBoolPref("webdeveloper.edit.css.stick", stick);
  568.  
  569.     webdeveloper_updateStickCSS();
  570. }
  571.  
  572. // Updates the stick CSS button
  573. function webdeveloper_updateStickCSS()
  574. {
  575.     const preferencesService = Components.classes["@mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefService).getBranch("");
  576.     const stringBundle       = document.getElementById("webdeveloper-string-bundle");
  577.  
  578.     var element = document.getElementById("webdeveloper-stick-css-sidebar");
  579.     var label   = null;
  580.     var stick   = false;
  581.  
  582.     // If the edit CSS stick preference is set
  583.     if(preferencesService.prefHasUserValue("webdeveloper.edit.css.stick"))
  584.     {
  585.         stick = preferencesService.getBoolPref("webdeveloper.edit.css.stick");
  586.     }
  587.  
  588.     // If the element exists
  589.     if(element)
  590.     {
  591.         // If sticking the CSS
  592.         if(stick)
  593.         {
  594.             label = stringBundle.getString("webdeveloper_unstickTooltip");
  595.  
  596.             element.setAttribute("class", "unstick webdeveloper-sidebar-button");
  597.             element.setAttribute("tooltiptext", label);
  598.         }
  599.         else
  600.         {
  601.             label = stringBundle.getString("webdeveloper_stickTooltip");
  602.  
  603.             element.setAttribute("class", "webdeveloper-sidebar-button");
  604.             element.setAttribute("tooltiptext", label);
  605.         }
  606.     }
  607. }